<template>
  <div class="main-container">
    <img class="theme" src="../../../assets/phone/index/index.jpg" alt="logo" />
    <div class="search-bar">
      <input class="search-input" placeholder="请输入您想住的区域、商圈或小区名字" type="text" />
      <div class="icon iconfont icon-sousuo5" @click="search"></div>
    </div>
    <div class="button-bar">
      <div class="ibutton entire">
        <div class="circle">
          <span class="icon iconfont icon-home"></span>
        </div>
        <span>整租房源</span>
      </div>
      <div class="ibutton share">
        <div class="circle">
          <span class="icon iconfont icon-dalou4"></span>
        </div>
        <span>合租房源</span>
      </div>
      <div class="ibutton short">
        <div class="circle">
          <span class="icon iconfont icon-suoping"></span>
        </div>
        <span>短期租赁</span>
      </div>
      <div class="ibutton map-search">
        <div class="circle">
          <span class="icon iconfont icon-ditu"></span>
        </div>
        <span>地图找房</span>
      </div>
    </div>
    <!-- <div class="piece discounts">
      <div class="iheader">
        <div class="text">今日特惠</div>
        <div class="more">
          <span>更多</span>
          <span class="iconfont icon-jiantouyou"></span>
        </div>
      </div>
      <div class="content">
        <div class="item" v-for="(item,index) in discounts" :key="'discounts'+index">
          <img class="image" :src="item.pictureUrl" :alt="item.name" />
          <br />
          <span v-text="item.name"></span>
          <br />
          <span class="price" v-text="item.price+'元/月'"></span>
          <span class="old-price" v-text="'原价：'+item.oldPrice+'元'"></span>
        </div>
      </div>
    </div>-->
    <div class="piece good-house">
      <div class="iheader">
        <div class="text">好房推荐</div>
      </div>
      <div class="content" >
        <router-link v-for="(item,index) in goodHouses" :key="'good'+index" tag="div" :to="{path:'detail',query:{id:item.id}}">
          <div class="item" style="width:100%;" @click="showDetail(item.id)">
            <img
              :src="item.pictureUrl"
              :alt="item.name"
              class="image"
              height="200px"
              style="width:100%"
            />
            <span class="name" v-text="item.name"></span>
            <div class="state-bar">
              <div
                class="state"
                v-for="(state,index) in item.state"
                :key="'state'+index"
                v-text="state"
              ></div>
            </div>
            <span class="price" v-text="item.price+'元/月'"></span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import houseImg from '@/assets/phone/index/house.jpg'
import goodImg from '@/assets/phone/index/background.png'
import noPicture from '@/assets/nopicture.jpg'
import { getAction } from '@/api/manage'

export default {
  name: 'house',
  data() {
    return {
      state: [
        { label: '冰箱', value: '0' },
        { label: '洗衣机', value: '1' },
        { label: '空调', value: '2' },
        { label: '窗户', value: '3' },
        { label: '床', value: '4' },
        { label: '衣柜', value: '5' },
        { label: '书桌', value: '6' },
        { label: '橱柜', value: '7' },
        { label: '热水器', value: '8' },
        { label: 'WIFI', value: '9' },
        { label: '油烟机', value: '10' }
      ],
      discounts: [
        {
          name: '邕宁南宁万达茂【合租】',
          pictureUrl: houseImg,
          price: 1080,
          oldPrice: 1180
        },
        {
          name: '邕宁南宁万达茂【合租】',
          pictureUrl: houseImg,
          price: 1080,
          oldPrice: 1180
        },
        {
          name: '邕宁南宁万达茂【合租】',
          pictureUrl: houseImg,
          price: 1080,
          oldPrice: 1180
        }
      ],
      goodHouses: [],
      url: {
        list: '/buildingManagement/pageList'
      }
    }
  },
  created() {
    this.getData(1, 20)
  },
  methods: {
    search() {
      this.getData({})
    },
    showDetail(e) {},
    getData(condition, pageIndex, pageSize) {
      let that = this
      if (!condition) {
        condition = {}
      }
      let pageLimit = { pageIndex, pageSize }
      condition = Object.assign(condition, pageLimit)
      getAction(this.url.list, condition).then(res => {
        this.goodHouses = res.result.map((item, index) => {
          let house = {}
          if (item.pictureList.length) {
            house.pictureUrl = window._CONFIG['domianURL'] + '/' + item.pictureList[0].pictureUrl
          } else {
            house.pictureUrl = noPicture
          }
          house.name = item.roomNum
          house.price = item.roomRental
          let state = [],
            strs = []
          if (item.roomConfiguration) {
            strs = item.roomConfiguration.toString().split(',')
          }
          state = strs.map(item => {
            for (let i = 0; i < that.state.length; i++) {
              const e = that.state[i]
              if (e.value == item) {
                return e.label
              }
            }
          })
          house.id = item.id
          house.state = state
          return house
        })
      })
    }
  }
}
</script>

<style scoped>
@import '~@/assets/phone/iconfont/iconfont.css';
.theme {
  width: 100%;
}

.search-bar {
  position: absolute;
  top: 150px;
  width: 86%;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin: 0 7%;
  border-radius: 20px;
  box-shadow: 0px 3px 6px rgba(30, 30, 30, 0.2);
}

.search-input {
  background: none;
  outline: none;
  border: none;
  width: 90%;
  margin-right: 10px;
  font-size: 14px;
}

.search-bar .icon:active {
  color: #8ac6d1;
}

.search-input::placeholder {
  color: #aaa;
  font-size: 14px;
}

.button-bar {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: 20px;
}

.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 38px;
  color: #fff;
  box-shadow: 0px 0px 6px rgba(30, 30, 30, 0.3);
}

.entire .circle {
  background-color: #de4307;
}

.share .circle {
  background-color: #f29c2b;
}

.short .circle {
  background-color: #f6d04d;
}

.map-search .circle {
  background-color: #8bc24c;
}

.circle .icon {
  font-size: 24px;
}

.ibutton {
  display: flex;
  width: 70px;
  justify-content: center;
  flex-wrap: wrap;
  border-radius: 10px;
  padding: 5px;
}

.ibutton:active {
  background-color: rgba(100, 200, 200, 0.8);
}

.piece {
  border-top: 10px solid #eee;
}

.iheader {
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  position: relative;
}

.discounts .more {
  color: #e44;
  font-size: 16px;
  position: absolute;
  right: 20px;
}

.discounts .image {
  width: 200px;
  height: 130px;
}

.discounts .content {
  white-space: nowrap;
  width: 100%;
  overflow-x: scroll;
  /* overflow-y: hidden; */
}

.discounts .content::-webkit-scrollbar {
  display: none;
}

.discounts .item {
  display: inline-block;
  margin: 10px 10px;
}

.iheader .text {
  margin-left: 10px;
  border-left: 3px solid #5bd1d7;
  padding-left: 10px;
  font-size: 16px;
}

.discounts .item .price {
  font-size: 16px;
  color: #e44;
  margin-right: 20px;
}

.discounts .item .old-price {
  font-size: 12px;
  text-decoration: line-through;
}

.good-house .image {
  margin-bottom: 10px;
}

.good-house .name {
  margin: 10px;
  font-size: 15px;
}

.good-house .state-bar {
  display: flex;
  flex-wrap: wrap;
}

.good-house .state {
  padding: 0 8px;
  margin: 4px;
  background-color: #ceefe4;
  border-radius: 6px;
}

.good-house .price {
  margin: 20px;
  color: #e44;
  font-size: 16px;
  font-weight: 600;
}

.main-container {
  overflow: hidden;
}
</style>